<template>
  <div id="nav">
    <div class="list">
      <!-- <h3 v-for="(item,index) in arr" :key="index"></h3> -->
      <div class="list-show">
        <ul>
          <li>aaa</li>
        </ul>
        <p>更多></p>
      </div>
      <div class="list-hidden">
        <ul>
          <li>aaaa</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import instance from "../api"
export default {
  data() {
      return{
          arr:[]
      }
  },
  methods: {
      async fn(){
          var {data} =await instance.get("/aidou")
            console.log(data);
            this.arr=data
      }
  },
  created(){
        this.fn();
      
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.list {
  width: 640px;
  box-sizing: border-box;
  padding: 10px 10px 20px 10px;
}
.list h3 {
  color: #444;
  font-family: normal;
  font-size: 14px;
  margin-bottom: 8px;
}
.list-show {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.list-show ul {
  width: 510px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.list-show p {
  color: #ff5959;
  font-size: 13px;
}
.list-show ul li,
.list-hidden ul li {
  padding: 4px 5px;
  margin: 0 8px 0 0;
  background: rgb(221, 221, 221);
  border-radius: 3px;
  color: #444;
}
.list-hidden {
  margin-top: 10px;
  /* display: none; */
}
.list-hidden ul {
  font-size: 13px;
  width: 300px;
  display: flex;
  justify-content: space-between;
}
</style>